<template>
  <el-scrollbar class="side-scroll-bar">
    <el-tabs
      v-model="firstTab"
      type="card"
      class="no-bottom-margin indent-left-margin"
      @tab-click="handleClick"
    >
      <el-tab-pane name="componentLib">
        <template #label>
          <span><svg-icon icon-class="zujian" />通用组件库</span>
        </template>
        <div class="icon-list">
          <div
            class="icon-item"
            v-for="(icon, index) in rIcons"
            :key="index"
            draggable="true"
            :style="{
              border: icon.selected
                ? '1px solid #000'
                : '1px solid transparent',
            }"
            @dragstart="onDragStart($event, icon.data)"
            @click="onClick(icon, rIcons)"
            :title="icon.title"
          >
            <i v-if="icon.key" class="iconfont" :class="`icon-${icon.key}`"></i>
            <img
              v-else-if="icon.svg"
              :src="icon.svg"
              alt=""
              srcset=""
              class="img"
            />
            <span>{{ icon.title }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="ownLib">
        <template #label>
          <span><svg-icon icon-class="moxingzujian" />个人组件库</span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="线路基本信息"
      :visible="visible"
      width="50%"
      :before-close="handleClose"
    >
    </el-dialog>
  </el-scrollbar>
</template>

<script>
import { icons } from "@/utils/data";
import { parseSvg } from "@topology/svg";
import { Node } from "@topology/core";
import { mapMutations, mapState } from "vuex";

export default {
  computed: {
    ...mapState(["currentOperationChangeFlag"]),
  },
  watch: {
    currentOperationChangeFlag: function () {
      this.rIcons.forEach((icon) => {
        icon.selected = false;
      });
      this.setData({
        currentOperationChangeFlag: false,
      });
    },
  },
  data() {
    return {
      scrollerHeight: window.innerHeight - 60 + "px",
      firstTab: "componentLib",
      rIcons: [],
      visible: false,
    };
  },
  mounted() {
    this.rIcons = icons;
  },
  methods: {
    ...mapMutations(["setData"]),
    onDragStart(e, data) {
      // e.dataTransfer.setData("Topology", JSON.stringify(data));
    },
    onClick(data, rIcons) {
      rIcons.forEach((icon) => {
        if (icon.svg !== data.svg) icon.selected = false;
      });
      data.selected = !data.selected;
      let activeOperation = rIcons.filter((item) => item.selected)[0];
      this.setData({
        currentOperation: activeOperation,
        currentObj: { ...activeOperation, NodeIndex: 1 },
      });
    },
    handleClick(tab, e) {
      console.log(tab, e);
    },
    handleClose() {
      this.visible = false;
    },
    addLink() {
      console.log(window.topology);
    },
  },
};
</script>

<style lang="scss" scoped>
.side-scroll-bar {
  width: 100%;
  height: 100%;
  :deep(.el-scrollbar__view) {
    width: 100%;
    height: 100%;
  }
  .icon-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .icon-item {
      width: 50%;
      box-sizing: border-box;
      padding: 0 10px;
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .img {
      // width: 100%;
      height: 100%;
    }
  }
}
</style>
